<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <school></school>
      <hr />
      <student></student>
      <hr />
      <hello></hello>
    </div>

    <script>
      // 1.创建组件
      // 创建school组件
      const school = Vue.extend({
        template: `
           <div>
              <h2>学校名称：{{schoolName}}</h2>
              <h2>学校地址：{{address}}</h2>
           </div>
        `,
        data() {
          return {
            schoolName: "尚硅谷",
            address: "北京昌平",
          };
        },
      });
      // 创建学生组件
      const student = Vue.extend({
        template: `
           <div>
              <h2>学生姓名：{{studentName}}</h2>
              <h2>学生年龄：{{age}}</h2>
           </div>
          `,
        data() {
          return {
            studentName: "张三",
            age: 18,
          };
        },
      });
      //   // 注册组件
      //   school.mount("#root");
      //   student.mount("#root");

      const hello = Vue.extend({
        template: `<div><h2>你好呀，{{name}}</h2></div>`,
        data() {
          return { name: "帅静" };
        },
      });

      Vue.component("hello", hello);
      new Vue({
        el: "#root",
        //2.注册组件
        components: {
          school,
          student,
        },
      });
    </script>
  </body>
</html>
